<template>
    <el-select v-model="city" filterable @change="onChange">
      <el-option
        v-for="(item, index) in cityList"
        :key="`city_${index}`"
        :value="item.id"
        :label="item.cityName"
      ></el-option>
    </el-select>
  </template>
  <script>
  import { GET_CITY_LIST } from "@/http/interface";
  import CitySelect from '@/components/common/city.vue';
  export default {
    name: "CitySelect",
    props: {
      value: {
        type: [String, Number],
        default: "",
      },
    },
    components:{
        CitySelect
    },
    watch: {
      value: {
        handler: function (n) {
          this.city = n;
        },
        immediate: true,
      },
    },
    data() {
      return {
        city: "",
        cityList: [],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      // 获取医生列表
      getList() {
        let params = {};
        params.current = 1;
        params.size = 10000;
        GET_CITY_LIST(params).then((res) => {
          let _obj = res.data || {};
          this.cityList = _obj.records || [];
        });
      },
  
      // 监听下拉框选择
      onChange(e) {
        let _list = this.cityList || [];
        let m = _list.find((k) => k.id == e);
        this.$emit("input", e);
        this.$emit("change", m ? m.cityName : "");
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  </style>